<template>
	<view class="page">
		<view class="detail-container" v-if="!loading && detail">
			<!-- 流程状态 -->
			<view class="status-card">
				<view class="status-icon" :class="detail.status">
					<uni-icons 
						:type="getStatusIcon(detail.status)" 
						size="40" 
						color="#fff"
					></uni-icons>
				</view>
				<text class="status-text">{{ getStatusText(detail.status) }}</text>
				<text class="status-time">{{ detail.createTime }}</text>
			</view>
			
			<!-- 投诉类型标识 -->
			<view class="complaint-type-card" v-if="detail.type === 'complaint'">
			<view class="type-icon" :class="complaintTypeClass">
				<uni-icons :type="getComplaintTypeIcon(detail.complaintType)" size="30" color="#fff"></uni-icons>
			</view>
				<view class="type-info">
					<text class="type-name">{{ getComplaintTypeName(detail.complaintType) }}</text>
					<text class="type-desc">{{ getComplaintTypeDesc(detail.complaintType) }}</text>
				</view>
			</view>
			
			<!-- 投诉分类详细信息 -->
			<view class="complaint-classification-detail" v-if="detail.type === 'complaint' && detail.complaintClassification">
				<view class="section-title">投诉分类信息</view>
				<view class="classification-grid">
					<view class="classification-item">
						<text class="item-label">分类类型</text>
						<text class="item-value classification-type">{{ detail.complaintTypeName }}</text>
					</view>
					<view class="classification-item" v-if="detail.complaintTypeDescription">
						<text class="item-label">类型描述</text>
						<text class="item-value">{{ detail.complaintTypeDescription }}</text>
					</view>
					<view class="classification-item" v-if="detail.complaintReason">
						<text class="item-label">投诉原因</text>
						<text class="item-value">{{ detail.complaintReason }}</text>
					</view>
					<view class="classification-item" v-if="detail.complaintCustomerId">
						<text class="item-label">客户ID</text>
						<text class="item-value">{{ detail.complaintCustomerId }}</text>
					</view>
					<view class="classification-item" v-if="detail.complaintOrderId">
						<text class="item-label">订单ID</text>
						<text class="item-value">{{ detail.complaintOrderId }}</text>
					</view>
				</view>
			</view>
			
			<!-- 基本信息 -->
			<view class="info-section">
				<view class="section-title">基本信息</view>
				<view class="info-item">
					<text class="label">流程类型</text>
					<text class="value">{{ detail.typeName }}</text>
				</view>
				<view class="info-item" v-if="detail.type === 'complaint'">
					<text class="label">投诉分类</text>
					<text class="value complaint-type">{{ getComplaintTypeName(detail.complaintType) }}</text>
				</view>
				<view class="info-item">
					<text class="label">申请标题</text>
					<text class="value">{{ detail.title }}</text>
				</view>
				<view class="info-item">
					<text class="label">申请人</text>
					<text class="value">{{ detail.applicant }}</text>
				</view>
				<view class="info-item">
					<text class="label">所属部门</text>
					<text class="value">{{ detail.department }}</text>
				</view>
				<view class="info-item" v-if="detail.amount">
					<text class="label">申请金额</text>
					<text class="value amount">￥{{ detail.amount }}</text>
				</view>
				<view class="info-item">
					<text class="label">申请时间</text>
					<text class="value">{{ detail.createTime }}</text>
				</view>
			</view>
			
			<!-- 申请详情 -->
			<view class="info-section">
				<view class="section-title">申请详情</view>
				<view class="detail-content">
					<text>{{ detail.content }}</text>
				</view>
				
				<!-- 附件列表 -->
				<view class="attachment-list" v-if="detail.attachments && detail.attachments.length > 0">
					<text class="attachment-title">附件</text>
					<view 
						class="attachment-item" 
						v-for="(file, index) in detail.attachments" 
						:key="index"
						@click="previewFile(file)"
					>
						<uni-icons type="paperclip" size="18" color="#667eea"></uni-icons>
						<text class="file-name">{{ file.name }}</text>
					</view>
				</view>
			</view>
			
			<!-- 审批历史 -->
			<view class="info-section">
				<view class="section-title">审批历史</view>
				<view class="timeline">
					<view 
						class="timeline-item" 
						v-for="(record, index) in detail.approvalHistory" 
						:key="index"
					>
						<view class="timeline-dot" :class="'timeline-dot-' + record.status"></view>
						<view class="timeline-content">
							<view class="timeline-header">
								<text class="approver">{{ record.approver }}</text>
								<text class="timeline-status" :class="'timeline-status-' + record.status">
									{{ getStatusText(record.status) }}
								</text>
							</view>
							<text class="timeline-time">{{ record.time }}</text>
							<text class="timeline-remark" v-if="record.remark">
								审批意见：{{ record.remark }}
							</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 审批操作按钮（仅待审批状态显示） -->
			<view class="action-bar" v-if="detail.status === 'pending'">
				<button class="action-btn reject-btn" @click="showRejectModal">
					驳回
				</button>
				<button class="action-btn approve-btn" @click="handleApprove">
					通过
				</button>
			</view>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading-container" v-if="loading">
			<uni-icons type="spinner-cycle" size="40" color="#999"></uni-icons>
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 驳回弹窗 -->
		<uni-popup ref="rejectPopup" type="dialog">
			<view class="reject-dialog">
				<view class="dialog-title">驳回理由</view>
				<textarea 
					class="reject-textarea" 
					v-model="rejectReason" 
					placeholder="请输入驳回理由"
					maxlength="200"
				></textarea>
				<view class="dialog-actions">
					<button class="dialog-btn cancel-btn" @click="closeRejectModal">取消</button>
					<button class="dialog-btn confirm-btn" @click="handleReject">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { approveProcess, rejectProcess } from '@/api/approval.js'
import { getUserInfo } from '@/utils/auth.js'

export default {
	data() {
		return {
			id: null,
			detail: null,
			loading: false,
			rejectReason: '',
			userInfo: {}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id
			this.taskId = options.taskId // 获取taskId参数
			this.userInfo = getUserInfo() || {}
			this.loadDetail()
		}
	},
	computed: {
		// 投诉类型样式类
		complaintTypeClass() {
			if (!this.detail || !this.detail.complaintType) return 'other-type'
			return this.getComplaintTypeClass(this.detail.complaintType)
		}
	},
	methods: {
		// 加载详情
		async loadDetail() {
			if (this.loading) return
			
			this.loading = true
			
			try {
				// 检查用户信息
				if (!this.userInfo.username) {
					uni.showToast({
						title: '用户信息异常，请重新登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({ url: '/pages/login/login' })
					}, 1500)
					return
				}

				// 根据类型选择数据获取方式
				let res
				// 检查是否为投诉审批（通过URL参数或任务ID判断）
				// 检查多种可能的投诉标识
				const isComplaint = (this.id && this.id.toString().includes('complaint')) ||
								   (this.taskId && this.taskId.toString().includes('complaint')) ||
								   (this.id && this.id.toString().includes('Complaint')) ||
								   (this.taskId && this.taskId.toString().includes('Complaint'))
				
				console.log('=== 详情页面加载开始 ===')
				console.log('任务ID:', this.id)
				console.log('TaskID参数:', this.taskId)
				console.log('是否为投诉审批:', isComplaint)
				console.log('ID包含complaint:', this.id && this.id.toString().includes('complaint'))
				console.log('TaskID包含complaint:', this.taskId && this.taskId.toString().includes('complaint'))
				
				// 强制使用投诉API进行测试
				console.log('强制使用投诉API获取详情进行测试')
				res = await this.getComplaintDetailFromAPI()
				
				// 如果投诉API失败，再使用模拟数据
				if (res.code !== 200) {
					console.log('投诉API失败，使用模拟数据')
					res = await this.mockGetDetail()
				}
				
				if (res.code === 200) {
					this.detail = res.data
					
					// 打印从流程变量中获取的信息
					console.log('=== 详情页面加载完成 ===')
					console.log('任务ID:', this.id)
					console.log('TaskID:', this.detail.taskId)
					console.log('任务类型:', this.detail.type)
					console.log('任务标题:', this.detail.title)
					console.log('申请人:', this.detail.applicant)
					console.log('任务状态:', this.detail.status)
					
					// 如果是投诉任务，打印投诉分类信息
					if (this.detail.type === 'complaint' && this.detail.complaintClassification) {
						console.log('=== 投诉分类信息（从流程变量获取）===')
						console.log('投诉类型:', this.detail.complaintType)
						console.log('投诉类型名称:', this.detail.complaintTypeName)
						console.log('类型描述:', this.detail.complaintTypeDescription)
						console.log('投诉原因:', this.detail.complaintReason)
						console.log('客户ID:', this.detail.complaintCustomerId)
						console.log('订单ID:', this.detail.complaintOrderId)
					}
					
					// 打印完整的任务详情
					console.log('=== 完整任务详情 ===')
					console.log(JSON.stringify(this.detail, null, 2))
					
				} else {
					uni.showToast({
						title: res.message || '获取详情失败',
						icon: 'none'
					})
				}
				
			} catch (error) {
				console.error('加载详情失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		// 从API获取投诉详情
		async getComplaintDetailFromAPI() {
			try {
				console.log('=== 开始调用投诉API ===')
				console.log('用户名:', this.userInfo.username)
				console.log('任务ID:', this.id)
				console.log('TaskID参数:', this.taskId)
				
				// 调用投诉专用API获取任务列表
				const { queryComplaintTasks } = await import('@/api/approval.js')
				console.log('API方法导入成功:', queryComplaintTasks)
				
				const res = await queryComplaintTasks(this.userInfo.username)
				
				console.log('=== 投诉详情页面 - 从流程变量获取信息 ===')
				console.log('API响应结果:', res)
				console.log('API响应码:', res.code)
				console.log('API响应数据:', res.data)
				
				// 检查API调用是否成功
				if (res.code !== 200) {
					console.error('API调用失败:', res.message || '未知错误')
					return { code: res.code, message: res.message || 'API调用失败' }
				}
				
				// 检查是否有数据
				if (!res.data || res.data.length === 0) {
					console.warn('API返回空数据，可能没有投诉任务')
					return { code: 404, message: '没有找到投诉任务' }
				}
				
				// 打印所有可用任务
				console.log('=== 所有可用任务 ===')
				res.data.forEach((task, index) => {
					console.log(`任务${index + 1}:`, {
						taskId: task.taskId,
						id: task.id,
						processInstanceId: task.processInstanceId,
						taskName: task.taskName,
						assignee: task.assignee
					})
				})
				
				// 查找匹配的任务
				const task = res.data.find(item => 
					item.taskId === this.taskId || 
					item.id === this.id || 
					item.processInstanceId === this.id
				)
				
				console.log('=== 任务匹配结果 ===')
				console.log('查找条件:', {
					taskId: this.taskId,
					id: this.id,
					processInstanceId: this.id
				})
			console.log('匹配到的任务:', task)
			
			if (task) {
				console.log('任务原始流程变量:', task)
				
				// 打印原始流程变量信息
				console.log('=== 原始流程变量信息 ===')
				console.log('任务ID:', task.taskId)
				console.log('流程实例ID:', task.processInstanceId)
				console.log('任务名称:', task.taskName)
				console.log('申请人:', task.applicant)
				console.log('创建时间:', task.createTime)
				console.log('投诉原因:', task.complaintReason)
				
				// 打印所有流程变量
				console.log('=== 所有流程变量 ===')
				Object.keys(task).forEach(key => {
					if (key.startsWith('complaint') || key.includes('Type') || key.includes('Reason') || key.includes('Customer') || key.includes('Order')) {
						console.log(`${key}:`, task[key])
					}
				})
				
				// 格式化任务数据为详情格式
				const detailData = {
					id: task.id || task.taskId,
					taskId: task.taskId,
					type: 'complaint',
					typeName: '投诉审批',
					title: task.taskName || '投诉申请',
					applicant: task.applicant || '系统用户',
					department: '客服部',
					createTime: this.formatTime(task.createTime),
					status: 'pending',
					content: task.complaintReason || '暂无投诉内容',
					attachments: [],
					approvalHistory: [
						{
							approver: task.applicant || '系统用户',
							status: 'submit',
							time: this.formatTime(task.createTime),
							remark: ''
						}
					]
				}
				
				// 从流程变量获取投诉分类信息
				const classificationInfo = this.parseComplaintClassificationFromVariables(task)
				console.log('=== 解析后的投诉分类信息 ===')
				console.log('分类信息:', classificationInfo)
				
				if (classificationInfo) {
					detailData.complaintClassification = true
					detailData.complaintType = classificationInfo.type
					detailData.complaintTypeName = classificationInfo.typeName
					detailData.complaintTypeDescription = classificationInfo.typeDescription
					detailData.complaintReason = classificationInfo.reason
					detailData.complaintCustomerId = classificationInfo.customerId
					detailData.complaintOrderId = classificationInfo.orderId
					
					console.log('=== 最终详情数据 ===')
					console.log('投诉分类:', detailData.complaintType)
					console.log('分类名称:', detailData.complaintTypeName)
					console.log('分类描述:', detailData.complaintTypeDescription)
					console.log('投诉原因:', detailData.complaintReason)
					console.log('客户ID:', detailData.complaintCustomerId)
					console.log('订单ID:', detailData.complaintOrderId)
				} else {
					console.log('未找到投诉分类信息')
				}
				
				console.log('=== 完整详情数据 ===')
				console.log('详情数据:', detailData)
				
				return {
					code: 200,
					message: '成功',
					data: detailData
				}
			} else {
				console.log('未找到匹配的任务')
				return {
					code: 404,
					message: '未找到对应的投诉任务'
				}
			}
		} catch (error) {
			console.error('从API获取投诉详情失败:', error)
			return {
				code: 500,
				message: '网络错误，请重试'
			}
		}
	},
		
		// 模拟获取详情
		mockGetDetail() {
			return new Promise((resolve) => {
				setTimeout(() => {
					// 根据URL参数判断是否为投诉审批
					const isComplaint = this.id && this.id.toString().includes('complaint')
					
					console.log('=== 模拟数据模式 - 从流程变量获取信息 ===')
					console.log('是否为投诉审批:', isComplaint)
					console.log('任务ID:', this.id)
					console.log('任务ID参数:', this.taskId)
					
					// 模拟从流程变量获取的投诉分类信息
					const mockProcessVariables = isComplaint ? {
						complaintTypeName: '物流问题',
						complaintTypeDescription: '物流方面的问题',
						complaintReason: '收到的商品与订单描述不符，商品质量存在问题，包装破损严重，影响正常使用。希望能够及时处理并给予合理的解决方案。',
						complaintCreateDate: '2025-10-19T08:26:02.000+00:00',
						complaintCustomerId: 1001,
						complaintOrderId: 12345,
						complaintApplicationId: 97,
						complaintClassification: '已分类'
					} : null
					
					console.log('=== 模拟流程变量信息 ===')
					console.log('流程变量:', mockProcessVariables)
					
					const detailData = {
						id: this.id,
						taskId: this.taskId || '2523',
						type: isComplaint ? 'complaint' : 'expense',
						typeName: isComplaint ? '投诉审批' : '费用报销',
						complaintType: isComplaint ? 'logistics' : null,
						title: isComplaint ? '客户物流配送延迟投诉' : '2024年10月差旅费报销申请',
						applicant: '李四',
						department: '销售部',
						amount: isComplaint ? null : '3500.00',
						createTime: '2024-10-13 09:30',
						status: 'pending',
						content: isComplaint ? 
							'客户反馈：订单号20241013001的货物原定于10月12日送达，但至今未收到。客户多次联系物流公司无果，严重影响客户满意度。请相关部门尽快处理并给出解决方案。' : 
							'本次出差前往北京参加客户洽谈会议，为期3天。费用包括：往返机票2000元、住宿费1200元、餐费及其他300元，合计3500元。特此申请报销。',
						attachments: isComplaint ? [
							{ name: '物流跟踪记录.pdf', url: '' },
							{ name: '客户沟通记录.pdf', url: '' }
						] : [
							{ name: '机票发票.pdf', url: '' },
							{ name: '酒店发票.pdf', url: '' }
						],
						approvalHistory: [
							{
								approver: '李四',
								status: 'submit',
								time: '2024-10-13 09:30',
								remark: ''
							},
							{
								approver: '王经理',
								status: 'approved',
								time: '2024-10-13 10:15',
								remark: isComplaint ? '同意处理客户投诉' : '同意报销'
							}
						]
					}
					
					// 如果是投诉审批，从流程变量解析分类信息
					if (isComplaint && mockProcessVariables) {
						console.log('=== 解析模拟流程变量 ===')
						const classificationInfo = this.parseComplaintClassificationFromVariables(mockProcessVariables)
						console.log('解析后的分类信息:', classificationInfo)
						
						if (classificationInfo) {
							detailData.complaintClassification = true
							detailData.complaintType = classificationInfo.type
							detailData.complaintTypeName = classificationInfo.typeName
							detailData.complaintTypeDescription = classificationInfo.typeDescription
							detailData.complaintReason = classificationInfo.reason
							detailData.complaintCustomerId = classificationInfo.customerId
							detailData.complaintOrderId = classificationInfo.orderId
							
							console.log('=== 模拟数据最终详情 ===')
							console.log('投诉分类:', detailData.complaintType)
							console.log('分类名称:', detailData.complaintTypeName)
							console.log('分类描述:', detailData.complaintTypeDescription)
							console.log('投诉原因:', detailData.complaintReason)
							console.log('客户ID:', detailData.complaintCustomerId)
							console.log('订单ID:', detailData.complaintOrderId)
						} else {
							console.log('模拟数据未找到投诉分类信息')
						}
					}
					
					console.log('=== 模拟数据完整详情 ===')
					console.log('详情数据:', detailData)
					
					resolve({
						code: 200,
						message: '成功',
						data: detailData
					})
				}, 500)
			})
		},
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				pending: '待审批',
				approved: '已通过',
				rejected: '已驳回',
				submit: '提交申请'
			}
			return statusMap[status] || status
		},
		
		// 获取状态图标
		getStatusIcon(status) {
			const iconMap = {
				pending: 'clock',
				approved: 'checkmarkempty',
				rejected: 'closeempty'
			}
			return iconMap[status] || 'info'
		},
		
		// 获取投诉类型名称
		getComplaintTypeName(type) {
			const typeMap = {
				'logistics': '物流问题',
				'product': '产品问题', 
				'service': '服务态度',
				'other': '其他'
			}
			return typeMap[type] || '未知类型'
		},
		
		// 获取投诉类型描述
		getComplaintTypeDesc(type) {
			const descMap = {
				'logistics': '涉及物流配送、运输、仓储等相关问题',
				'product': '涉及产品质量、规格、功能等相关问题',
				'service': '涉及客服服务态度、响应速度等相关问题',
				'other': '不属于上述分类的其他类型投诉'
			}
			return descMap[type] || '未知类型描述'
		},
		
		// 获取投诉类型图标
		getComplaintTypeIcon(type) {
			const iconMap = {
				'logistics': 'car',
				'product': 'box',
				'service': 'person',
				'other': 'list'
			}
			return iconMap[type] || 'help'
		},
		
		// 获取投诉类型样式类
		getComplaintTypeClass(type) {
			const classMap = {
				'logistics': 'logistics-type',
				'product': 'product-type',
				'service': 'service-type',
				'other': 'other-type'
			}
			return classMap[type] || 'other-type'
		},
		
		// 显示驳回弹窗
		showRejectModal() {
			this.rejectReason = ''
			this.$refs.rejectPopup.open()
		},
		
		// 关闭驳回弹窗
		closeRejectModal() {
			this.$refs.rejectPopup.close()
		},
		
		// 审批通过
		async handleApprove() {
			// 打印taskId信息
			console.log('=== 审批通过操作 ===')
			console.log('当前任务taskId:', this.detail.taskId)
			console.log('当前任务id:', this.id)
			console.log('任务详情:', {
				id: this.id,
				taskId: this.detail.taskId,
				title: this.detail.title,
				applicant: this.detail.applicant,
				status: this.detail.status
			})
			
			uni.showModal({
				title: '确认审批',
				content: '确定要通过此审批吗？通过后将无法撤销。',
				confirmText: '确定通过',
				cancelText: '取消',
				success: async (res) => {
					if (res.confirm) {
						uni.showLoading({ title: '处理中...' })
						
						try {
							// 再次确认taskId
							const taskIdToUse = this.detail.taskId || this.id
							console.log('即将调用API审批通过，使用taskId:', taskIdToUse)
							
							// 调用真实API审批通过
							const result = await approveProcess(taskIdToUse)
							
							if (result.code === 200) {
								uni.hideLoading()
								uni.showToast({
									title: '审批成功',
									icon: 'success'
								})
								
								// 更新本地状态
								this.detail.status = 'approved'
								
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							} else {
								uni.hideLoading()
								uni.showToast({
									title: result.message || '审批失败',
									icon: 'none'
								})
							}
							
						} catch (error) {
							uni.hideLoading()
							console.error('审批失败:', error)
							uni.showToast({
								title: '网络错误，请重试',
								icon: 'none'
							})
						}
					}
				}
			})
		},
		
		// 审批驳回
		async handleReject() {
			if (!this.rejectReason.trim()) {
				uni.showToast({
					title: '请输入驳回理由',
					icon: 'none'
				})
				return
			}
			
			// 打印taskId信息
			console.log('=== 审批驳回操作 ===')
			console.log('当前任务taskId:', this.detail.taskId)
			console.log('当前任务id:', this.id)
			console.log('驳回理由:', this.rejectReason)
			console.log('任务详情:', {
				id: this.id,
				taskId: this.detail.taskId,
				title: this.detail.title,
				applicant: this.detail.applicant,
				status: this.detail.status
			})
			
			// 确认驳回
			uni.showModal({
				title: '确认驳回',
				content: '确定要驳回此申请吗？驳回后将无法撤销。',
				confirmText: '确定驳回',
				cancelText: '取消',
				success: async (res) => {
					if (res.confirm) {
						this.closeRejectModal()
						uni.showLoading({ title: '处理中...' })
						
						try {
							// 再次确认taskId
							const taskIdToUse = this.detail.taskId || this.id
							console.log('即将调用API审批驳回，使用taskId:', taskIdToUse)
							console.log('驳回理由:', this.rejectReason)
							
							// 调用真实API审批驳回
							const result = await rejectProcess(taskIdToUse, this.rejectReason)
							
							if (result.code === 200) {
								uni.hideLoading()
								uni.showToast({
									title: '已驳回',
									icon: 'success'
								})
								
								// 更新本地状态
								this.detail.status = 'rejected'
								
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							} else {
								uni.hideLoading()
								uni.showToast({
									title: result.message || '驳回失败',
									icon: 'none'
								})
							}
							
						} catch (error) {
							uni.hideLoading()
							console.error('驳回失败:', error)
							uni.showToast({
								title: '网络错误，请重试',
								icon: 'none'
							})
						}
					}
				}
			})
		},
		
		// 模拟审批通过
		mockApprove() {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({ code: 200, message: '操作成功' })
				}, 1000)
			})
		},
		
		// 模拟审批驳回
		mockReject() {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({ code: 200, message: '操作成功' })
				}, 1000)
			})
		},
		
		// 预览文件
		previewFile(file) {
			uni.showToast({
				title: '文件预览功能待开发',
				icon: 'none'
			})
		},
		
		// 从流程变量解析投诉分类信息
		parseComplaintClassificationFromVariables(item) {
			if (!item) return null
			
			try {
				const classificationInfo = {}
				
				// 从流程变量中获取分类信息
				if (item.complaintTypeName) {
					classificationInfo.typeName = item.complaintTypeName
					classificationInfo.type = this.getComplaintTypeKey(item.complaintTypeName)
				}
				
				if (item.complaintTypeDescription) {
					classificationInfo.typeDescription = item.complaintTypeDescription
				}
				
				if (item.complaintReason) {
					classificationInfo.reason = item.complaintReason
				}
				
				if (item.complaintCustomerId) {
					classificationInfo.customerId = item.complaintCustomerId
				}
				
				if (item.complaintOrderId) {
					classificationInfo.orderId = item.complaintOrderId
				}
				
				if (item.complaintCreateDate) {
					classificationInfo.createTime = item.complaintCreateDate
				}
				
				// 如果解析到了基本信息，返回分类信息
				if (classificationInfo.typeName) {
					return classificationInfo
				}
				
				return null
			} catch (error) {
				console.error('从流程变量解析投诉分类信息失败:', error)
				return null
			}
		},
		
		// 解析投诉分类信息（保留原方法作为备用）
		parseComplaintClassification(description) {
			if (!description) return null
			
			try {
				// 解析DESCRIPTION_字段中的投诉分类信息
				// 格式：=== 投诉分类信息 ===\n投诉类型: 物流问题\n类型描述: 物流方面的问题\n...
				const lines = description.split('\n')
				const classificationInfo = {}
				
				for (let i = 0; i < lines.length; i++) {
					const line = lines[i].trim()
					
					if (line.includes('投诉类型:')) {
						classificationInfo.typeName = line.split('投诉类型:')[1].trim()
						// 根据类型名称映射到类型key
						classificationInfo.type = this.getComplaintTypeKey(classificationInfo.typeName)
					} else if (line.includes('类型描述:')) {
						classificationInfo.typeDescription = line.split('类型描述:')[1].trim()
					} else if (line.includes('投诉原因:')) {
						classificationInfo.reason = line.split('投诉原因:')[1].trim()
					} else if (line.includes('申请时间:')) {
						classificationInfo.createTime = line.split('申请时间:')[1].trim()
					} else if (line.includes('客户ID:')) {
						classificationInfo.customerId = line.split('客户ID:')[1].trim()
					} else if (line.includes('订单ID:')) {
						classificationInfo.orderId = line.split('订单ID:')[1].trim()
					}
				}
				
				// 如果解析到了基本信息，返回分类信息
				if (classificationInfo.typeName) {
					return classificationInfo
				}
				
				return null
			} catch (error) {
				console.error('解析投诉分类信息失败:', error)
				return null
			}
		},
		
		// 根据投诉类型名称获取类型key
		getComplaintTypeKey(typeName) {
			const typeMap = {
				'物流问题': 'logistics',
				'产品问题': 'product',
				'服务态度': 'service',
				'服务问题': 'service',
				'质量问题': 'product',
				'配送问题': 'logistics',
				'包装问题': 'logistics',
				'其他': 'other'
			}
			return typeMap[typeName] || 'other'
		},
		
		// 格式化时间
		formatTime(time) {
			if (!time) return ''
			
			try {
				const date = new Date(time)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				
				return `${year}-${month}-${day} ${hours}:${minutes}`
			} catch (error) {
				console.error('时间格式化失败:', error)
				return time
			}
		}
	}
}
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f5f7fa;
	padding-bottom: 120rpx;
}

/* 状态卡片 */
.status-card {
	background: #ffffff;
	padding: 50rpx 30rpx;
	text-align: center;
	margin-bottom: 20rpx;
}

/* 投诉类型卡片 */
.complaint-type-card {
	background: #ffffff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.type-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30rpx;
}

.logistics-type {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.product-type {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.service-type {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.other-type {
	background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.type-info {
	flex: 1;
}

.type-name {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10rpx;
}

.type-desc {
	display: block;
	font-size: 24rpx;
	color: #666666;
	line-height: 1.4;
}

.status-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin: 0 auto 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.status-icon.pending {
	background: #ff9800;
}

.status-icon.approved {
	background: #4caf50;
}

.status-icon.rejected {
	background: #f44336;
}

.status-text {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10rpx;
}

.status-time {
	display: block;
	font-size: 24rpx;
	color: #999999;
}

/* 信息区块 */
.info-section {
	background: #ffffff;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30rpx;
	padding-left: 20rpx;
	border-left: 6rpx solid #667eea;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
	border-bottom: none;
}

.label {
	font-size: 28rpx;
	color: #666666;
}

.value {
	font-size: 28rpx;
	color: #333333;
	text-align: right;
	max-width: 60%;
}

.value.amount {
	color: #ff6b6b;
	font-weight: bold;
	font-size: 32rpx;
}

.value.complaint-type {
	color: #667eea;
	font-weight: bold;
}

/* 详情内容 */
.detail-content {
	background: #f5f7fa;
	padding: 30rpx;
	border-radius: 12rpx;
	line-height: 1.8;
	font-size: 28rpx;
	color: #666666;
}

/* 附件列表 */
.attachment-list {
	margin-top: 30rpx;
}

.attachment-title {
	font-size: 26rpx;
	color: #999999;
	display: block;
	margin-bottom: 15rpx;
}

.attachment-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f5f7fa;
	border-radius: 8rpx;
	margin-bottom: 15rpx;
}

.attachment-item:active {
	opacity: 0.8;
}

.file-name {
	margin-left: 15rpx;
	font-size: 26rpx;
	color: #667eea;
}

/* 审批历史时间轴 */
.timeline {
	padding-left: 40rpx;
}

.timeline-item {
	position: relative;
	padding-bottom: 40rpx;
}

.timeline-item:last-child {
	padding-bottom: 0;
}

.timeline-item:not(:last-child)::after {
	content: '';
	position: absolute;
	left: -32rpx;
	top: 30rpx;
	width: 2rpx;
	height: calc(100% - 10rpx);
	background: #e0e0e0;
}

.timeline-dot {
	position: absolute;
	left: -40rpx;
	top: 8rpx;
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background: #e0e0e0;
}

.timeline-dot.submit {
	background: #2196f3;
}

.timeline-dot.approved {
	background: #4caf50;
}

.timeline-dot.rejected {
	background: #f44336;
}

.timeline-content {
	display: flex;
	flex-direction: column;
}

.timeline-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.approver {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
}

.timeline-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
}

.timeline-status.submit {
	background: #e3f2fd;
	color: #2196f3;
}

.timeline-status.approved {
	background: #e8f5e9;
	color: #4caf50;
}

.timeline-status.rejected {
	background: #ffebee;
	color: #f44336;
}

.timeline-time {
	font-size: 24rpx;
	color: #999999;
	margin-bottom: 10rpx;
}

.timeline-remark {
	font-size: 26rpx;
	color: #666666;
	background: #f5f7fa;
	padding: 15rpx;
	border-radius: 8rpx;
	margin-top: 10rpx;
}

/* 操作按钮 */
.action-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	padding: 20rpx 30rpx;
	display: flex;
	box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.action-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 12rpx;
	font-size: 30rpx;
	font-weight: bold;
	border: none;
}

.reject-btn {
	background: #ffffff;
	color: #f44336;
	border: 2rpx solid #f44336;
	margin-right: 20rpx;
}

.approve-btn {
	background: #4caf50;
	color: #ffffff;
}

/* 加载状态 */
.loading-container {
	padding: 200rpx 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.loading-text {
	font-size: 26rpx;
	color: #999999;
	margin-top: 20rpx;
}

/* 驳回弹窗 */
.reject-dialog {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 40rpx;
	width: 600rpx;
}

.dialog-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30rpx;
	text-align: center;
}

.reject-textarea {
	width: 100%;
	height: 200rpx;
	background: #f5f7fa;
	border-radius: 12rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #333333;
	margin-bottom: 30rpx;
	box-sizing: border-box;
}

.dialog-actions {
	display: flex;
}

.dialog-btn {
	flex: 1;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	border: none;
}

.cancel-btn {
	background: #f5f7fa;
	color: #666666;
	margin-right: 20rpx;
}

.confirm-btn {
	background: #f44336;
	color: #ffffff;
}

/* 投诉分类详细信息 */
.complaint-classification-detail {
	background: #ffffff;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.classification-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20rpx;
}

.classification-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.classification-item:last-child {
	border-bottom: none;
}

.item-label {
	font-size: 28rpx;
	color: #666666;
	font-weight: 500;
}

.item-value {
	font-size: 28rpx;
	color: #333333;
	text-align: right;
	max-width: 60%;
	line-height: 1.4;
}

.item-value.classification-type {
	color: #667eea;
	font-weight: bold;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
</style>

